<template>
  <div class="g-container">
    <div id="dBanner"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000)
camera.position.set(0, 12, 12)
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

// 初始化坐标系
const axesHelper = new THREE.AxesHelper(200)
// 添加坐标系
scene.add(axesHelper)

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.minPolarAngle = 0
controls.maxPolarAngle = Math.PI * 0.48
// 绑定控制器（更新渲染器）
controls.addEventListener('change', () => {
  renderer.render(scene, camera)
})

const loader = new GLTFLoader()
let star = null

loader.load('/src/model/start_space.glb', model => {
  star = model.scene

  star.children[0].position.set(-1.5, -0, 1.5)
  star.position.set(0, 0, 0)
  console.log(star)
  console.log(scene)
  scene.add(star)
})

onMounted(() => {
  document.querySelector('#dBanner').appendChild(renderer.domElement)
  animate()
})

const animate = () => {
  requestAnimationFrame(animate)
  star.rotation.y += 0.01
  // scene.children[1].children[0].rotation.y += 0.005;
  renderer.render(scene, camera)
}
</script>

<style scoped>
.g-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
